<!--筛选组件-->
<template>
	<view class="screen">
		<!-- 右侧弹出层 -->
		<uni-drawer
			ref="popup"
			:visible="isvisible"
			mode="right"
			@close="closePopup"
			class="filter_mask_wrap">
			<div class="filter_content">
			<slot name="fliterTop">
				<div class="fliterTop">
					<app-cell
						v-if="isCityShow"
						title="地区"
						:value="address"
						@goBack="chooseCitys">
					</app-cell>
				</div>
            </slot>
			<view class="filter-body">
				<view class="filter-list_content">
					<slot>
						<block v-for="(item, pIndex) in filterMaskData" :key="pIndex" v-show="item.hide !== true">
							<view class="filter_mask_list" v-if="!$util.isEmpty(item.list)">
								<view class="filter_mask_title">{{ item.title }}</view>
								<view class="filter_mask_body">
									<view
										v-for="(items, index) in item.list"
										:class="{'active' : items.status}"
										:key="index"
										@click="filterMaskBtn(item.list, items.status, pIndex, index)">
										<span>{{ items.name }}</span>
										<i v-if="item.type==2&&items.status" class="iconfont iconjiaobiao" />
									</view>
								</view>
							</view>
						</block>
						<slot name="filterList" />
					</slot>
				</view>
			</view>
			<view class="filter-bottom" name="filter-bottom" v-if="showBottomBtn">
				<view class="filter_mask_btn">
					<view @click="resetFilterMask">重置</view>
					<view class="confirm_btn" @click="closePopup">确定</view>
				</view>
			</view>
			</div>
		</uni-drawer>
		<mpvue-city-picker
        themeColor="#FFD11A"
        ref="mpvueCityPicker"
        :pickerValueDefault="defaultArea"
        @onConfirm="onConfirm"
    />
	</view>
</template>

<script>
import drawer from '@/components/uni_drawer.vue'
import appCell from '@/components/app_cell'
import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker'
export default {
	name: 'screen',
	components: {
		'uniDrawer': drawer,
		appCell,
		mpvueCityPicker
	},

	props: {
		filterMaskData: {
			type: Array,
			default: () => []
		},
		isCityShow: {
			type: Boolean,
			default: false
		},
		showBottomBtn: {
			type: Boolean,
			default: true
		}
	},
	data() {
		return {
			isvisible: false,
			address: '请选择地区',
			defaultArea: [0, 0, 1],
			form: {
				province_id: '',
				city_id: '',
				district_id: ''
			},
			address: ''
		}
	},
	methods: {
		onConfirm(val) {
			Object.keys(this.form).forEach((i, index) => {
				this.form[i] = val.code[index]
			})
			 this.address = [...new Set(val.label.split('-'))].join('')
			 this.$emit('filterQuery', this.formatFilterMaskData())
		},
		chooseCitys() {
			this.$refs.mpvueCityPicker.show()
		},
		openPopup() {
			this.isvisible = true
		},
		closePopup() {
			this.isvisible = false
		},
		// 筛选按钮
		filterMaskBtn(item, status, pIndex, index) {
			if (this.filterMaskData[pIndex].type !== 2) {
				for (const i in item) {
					item[i].status = false
				}
			}
			item[index].status = !status
			this.$emit('filterBtnCall', this.formatFilterMaskData())
			this.$emit('update:filterMaskData', this.filterMaskData)
		},
		formatFilterMaskData() {
			let form = {}
			const arr = []
			this.filterMaskData.forEach(i => {
				const current = []
				i.list.forEach(j => {
					if (j.status) {
						current.push(j.id)
						arr.push(j)
					}
				})
				form[i.key] = current.join(',')
			})
			if (this.isCityShow) {
				form = {
					...form,
					...this.form
				}
			}
			return {
				form: {
					...form
				},
				selectList: arr
			}
		},
		// ===重置===
		resetFilterMask() {
			if (!this.$util.isEmpty(this.filterMaskData)) {
				for (let i in this.filterMaskData) {
					for (let j in this.filterMaskData[i].list) {
						this.filterMaskData[i].list[j].status = false
					}
				}
			}
			this.$emit('update:filterMaskData', this.filterMaskData)
			this.$emit('filterQuery', this.formatFilterMaskData())
		}
	}
}
</script>

<style scoped lang="scss">
	.filter_mask_wrap {
		/*width: 596px;*/
		z-index: 999999;
		height: 100%;
		padding-top: 30px;
		box-sizing: border-box;
		overflow: hidden;
		.filter_content {
			height: 100%;
			display: flex;
			flex-direction: column;
			.filter-body {
				flex: 1;
				overflow: scroll;
				margin-top: 10px;
				& .filter-list_content {
					box-sizing: border-box;
				}
			}
		}
		.filter_mask_list {
			padding: 10px 20px 0 30px;
			.filter_mask_title {
				color: #666;
				margin-bottom: 26px;
			}
			.filter_mask_body {
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				margin-bottom: 50px;
				& > view {
					position: relative;
					width: calc(33.33% - 10px);
					height: 80px;
					line-height: 80px;
					text-align: center;
					background-color: #f4f4f4;
					border-radius: 10px;
					margin-right: 10px;
					margin-bottom: 10px;
				}
				& > view.active {
					color: #3a1b04;
					background-color: #ffd11a;
					i {
						position: absolute;
						right: 2px;
						bottom: 22px;
						width: 44px;
						height: 38px;
						color: #fff;
					}
				}
			}
		}
		.filter_mask_btn {
			display: flex;
			align-items: center;
			width: calc(100% - 62px);
			margin: 10px 30px 10px;
			border: 1px solid #ddd; /*no*/
			border-radius: 50px;
			font-size: 26px;
			text-align: center;
			overflow: hidden;
			& > view {
				width: 50%;
				height: 90px;
				line-height: 90px;
				&:nth-child(1) {
					background-color: #ffffff;
				}
			}
			.confirm_btn {
				color: #3a1b04;
				background-color: #ffd11a;
			}
		}
	}
	.fliterTop {
		padding: 0 5%;
	}
</style>
